<!DOCTYPE html>
<html>
    <head>
        <meta name="author" content="Kwh">
        <meta charset="utf-8">
        <title></title>
        <style>
            ul,li{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            #box{
                width: 520px;
                height: 280px;
                margin: 100px auto;
                position: relative;
            }
            #box .list li{
                position: absolute;
                top: 0;
                left: 0;
                display: none;
            }
            #box .list .current{
                display: block;
            }
            #box .count{
                position: absolute;
                right: 10px;
                bottom: 10px;
            }
            #box .count li{
                float: left;
                width: 20px;
                height: 20px;
                background-color: #fa0;
                border-radius: 50%;
                text-align: center;
                color: #fff;
                opacity: 0.6;
                margin-left: 10px;
                line-height: 20px;
                cursor: pointer;
            }
            #box .count li.current{
                background-color: #f60;
                opacity: 1;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <ul class="list">
                <li class="current"><img src="../img/01.jpg" alt=""></li>
                <li><img src="../img/02.jpg" alt=""></li>
                <li><img src="../img/03.jpg" alt=""></li>
                <li><img src="../img/04.jpg" alt=""></li>
                <li><img src="../img/05.jpg" alt=""></li>
            </ul> 
            <ul class="count">
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </body>
</html>

<script>
    
    var box = document.querySelector('#box');
    var ali = document.querySelectorAll('.list li');
    var anum = document.querySelectorAll('.count li');
    // 记录当前图片的索引
    var current = 0;
    // 保存定时器
    var timer = null;

    timer = setInterval(autoplay,1000);

    function autoplay(){
        current++;
        if(current >= ali.length){
            current=0;
        }
        show(current);

    }

    // 手动的
    for(var i=0;i<ali.length;i++){
        anum[i].index=i;
        anum[i].onmouseover = function(){
            show(this.index)
        }
    }

    // 图片的显示和隐藏
    function show(index){
        // 手动改变时 改变current值
        current=index;
        // 当前图片显示时 ,那么其他的图片应该隐藏
        for(var i=0;i<ali.length;i++){
            ali[i].style.display = 'none';
            anum[i].className='';
        }
        ali[index].style.display = 'block';
        anum[index].className='current';
    }
    
    // 当鼠标移入box容器的时候
    box.onmouseover = function(){
        clearInterval(timer);
    }
    box.onmouseout = function(){
        timer=setInterval(autoplay,1000);
    }


</script>